<template>
	<view class="home">
		<view class="scrollNav">
			<scroll-view scroll-x class="navscroll">
				<view class="item" v-for="(item,index) in navArr" :key="item.id" :class="{active:index==navIndex}" @click="clickNav(index,item.id)">{{item.classname}}</view>
			</scroll-view>
		</view>
		<view class="content">
			<view class="row" v-for="item in newsArr" :key="item.id">
				<newsbox @click.native="goDetail(item)" :item="item"></newsbox>
			</view>
		</view>
		<view class="nodata" v-if="!newsArr.length">
			<image src="../../static/images/nodata.png" mode="widthFix"></image>
		</view>
		<view class="loading" v-if="newsArr.length">
			<view v-if="loading==1">数据加载中……</view>
			<view v-if="loading==2">没有更多了~~~</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				navIndex:0,
				navArr:[],
				newsArr:[],
				currentPage:1,
				loading:0
			}
		},
		onLoad() {
			this.getNavData()
			this.getNewsData()
		},
		// 下拉加载更多
		onReachBottom(){
			if(this.loading==2){
				return;
			}
			this.currentPage++;
			this.loading=1;
			this.getNewsData();
		},
		methods: {
			// 点击导航切换
			clickNav(index,id){
				this.navIndex=index;
				this.newsArr=[]
				this.currentPage=1;
				this.loading=0;
				this.getNewsData(id);
			},
			// 测试跳转新闻详情页
			goDetail(item){
				uni.navigateTo({
					url:`/pages/detail/detail?cid=${item.classid}&id=${item.id}`
				})
			},
			// 获取导航列表数据
			getNavData(){
				uni.request({
					url:'https://ku.qingnian8.com/dataApi/news/navlist.php',
					success:res=>{
						this.navArr=res.data
					}
				})
			},
			// 获取新闻列表数据
			getNewsData(id=50){
				uni.request({
					url:'https://ku.qingnian8.com/dataApi/news/newslist.php',
					data:{
						cid:id,
						page:this.currentPage
					},
					success:(res)=>{
						if(res.data.length<=0){
							this.loading=2
						}
						this.newsArr=[...this.newsArr,...res.data]
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home{
		.navscroll{
			position: fixed;
			top:var(--window-top);
			left:0;
			z-index:1000;
			left:0;
			height:100rpx;
			background:#F7F8FA;
			white-space: nowrap;
			/deep/ ::-webkit-scrollbar {
				width:4px !important;
				height:1px !important;
				overflow:auto !important;
				background: transparent !important;
				-webkit-appearance: auto !important;
				display:block;
			}
			.item{
				display:inline-block;
				font-size:40rpx;
				line-height:100rpx;
				padding:0 30rpx;
				color:#333;
				&.active{
					color:#31C27C;
				}
			}
		}
		.content{
			padding:130rpx 30rpx 30rpx;
			.row{
				padding:20rpx 0;
				border-bottom:1rpx dotted #efefef;
			}
		}
		.nodata{
			display: flex;
			justify-content: center;
			image{
				width:360rpx;
			}
		}
		.loading{
			font-size:26rpx;
			text-align: center;
			color:#888;
			margin-bottom:50rpx;
			view{
				line-height:2em;
			}
		}
	}
</style>
